<template>
    <el-upload
      class="upload-demo"
      action=""
      :http-request="myUpload"
      :show-file-list="false"
    >
      <span class="uploadEnclosure">上传附件</span>
    </el-upload>
</template>
   
  <script>
import { defaultOptions, renderAsync } from "docx-preview";
export default {
  name: "wordOnlinePreview",
  methods: {
    myUpload(content) {
      const addTypeArray = content.file.name.split(".");
      const addType = addTypeArray[addTypeArray.length - 1];

      this.uploadFileName = content.file.name;
      this.uploadFileObj = content.file;
      if (addType === "pdf") {
        const url = URL.createObjectURL(content.file);
        console.log(url);
        this.xzbjPreviewIframeSrc = url;
        this.xzbjIframeIsShow = true;
        this.xzbjDialogPreviewDiv = false;
        this.xzbjPreviewImgUrl = "";
        this.xzbjDocPreviewFlag = false;

        this.previewBoxStyle =
          "height:400px;position: relative;overflow:hidden;";
      } else if (
        addType === "doc" ||
        addType === "docx" ||
        addType === "word"
      ) {
        console.log("word文件预览");
        this.xzbjPreviewImgUrl = "";
        this.xzbjPreviewIframeSrc = "";
        this.xzbjDialogPreviewDiv = false;
        this.xzbjDocPreviewFlag = true;
        this.xzbjIframeIsShow = false;

        // 将file转为buffer
        let fr = new FileReader();
        fr.readAsArrayBuffer(content.file);
        fr.addEventListener(
          "loadend",
          (e) => {
            console.log("loadend---->", e);
            let buffer = e.target.result;
            this.docxRender(buffer);
          },
          false
        );
      }
      //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
      else if (["png", "jpg", "jpeg", "bmp"].includes(addType)) {
        this.xzbjPreviewIframeSrc = "";
        this.xzbjIframeIsShow = false;
        this.xzbjDocPreviewFlag = false;
        this.imgPreview(content.file);

        this.previewBoxStyle = "height:400px;position: relative;overflow:auto;";
      } else if (addType === "rar" || addType === "zip" || addType === "7z") {
        this.filePreviewInfo = "请下载附件进行查看";
        this.xzbjPreviewImgUrl = "";
        this.xzbjPreviewIframeSrc = "";
        this.xzbjDocPreviewFlag = false;
        this.xzbjDialogPreviewDiv = true;
        this.$message({
          message: "该文件类型暂不支持预览",
          type: "warning",
        });
        return false;
      } else {
        this.filePreviewInfo = "该文件类型暂不支持预览";
        this.xzbjPreviewIframeSrc = "";
        this.xzbjIframeIsShow = false;
        this.xzbjDialogPreviewDiv = true;
        this.xzbjPreviewImgUrl = "";
        this.xzbjDocPreviewFlag = false;
        this.$message({
          message:
            "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",
          type: "warning",
        });
      }
    },
    // 渲染docx
    docxRender(buffer) {
      // 新窗口配置
      let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
      let docwindow = window.open("", "DetailRunTime", params); // 创建新窗口
      let box = document.createElement("div"); // 创建一个div
      renderAsync(
        buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
        box // HTMLElement 渲染文档内容的元素,
        // null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
        // this.docxOptions // 配置
      ).then((res) => {
        docwindow.document.write(box.outerHTML);
        docwindow.document.title = "文件预览"; // 窗口标题
        docwindow.document.getElementsByClassName("docx")[0].style.width = "auto";
      });
    },
  },
};
</script>